<template>
    <div id="Home">
        <font-header></font-header>
        <!-- 路由容器 -->
<!--        <keep-alive>-->
        <router-view  v-if="isRouterAlive"></router-view>
<!--        </keep-alive>-->
        <!-- <pre-position></pre-position> -->
         <div id="Pre-Position">
            <p>你当前的位置：</p>
            <div>
              <span class="pre-span" v-for="(data,index) in prePosition" :key="index">
                  <i class="el-icon-arrow-right"></i>
                  <router-link  :to="{name: 'CenterFollower',params: { userId}}"></router-link>
                  {{data.meta.title}}
              </span>
            </div>
        </div>
        <font-footer></font-footer>
    </div>
</template>
<script>
import FontHeader from '@/components/font/home/FontHeader.vue'
import FontFooter from '@/components/font/home/FontFooter.vue'
import '@/assets/fontElement.css'
// import { set } from 'vue/types/umd'
// import PrePosition from '@/components/font/home/PrePosition.vue'
export default {
  name: 'Home',
  // 局部注册
  components: { FontHeader, FontFooter },
  data () {
    return {
      myname: '',
      prePosition: {
        meta: { title: '首页' }
      },
      isRouterAlive: true
    }
  },
  updated: function () {
    // console.log(this.$store.state.token)
    if (this.$store.state.token !== null || this.$store.state.token !== undefined) {
      this.userId = this.$route.params.userId
    }
    this.prePosition = this.$route.matched
    // if (this.prePosition[0].name === 'Font') {
    //   this.$set(this.prePosition[0], 'name', 'Home')
    // }
    // if (this.prePosition[0].meta.title === '前台') {
    //   this.prePosition[0].meta.title = '首页'
    // }
    if (this.prePosition.length >= 2) {
      if (this.prePosition[1].meta.title === '首页') {
        this.prePosition[1].meta.title = ''
      }
    }
  },
  created: function () {
    if (this.$store.state.token !== null || this.$store.state.token !== undefined) {
      this.userId = this.$route.params.userId
    }
    this.prePosition = this.$route.matched
    // if (this.prePosition[0].name === 'Font') {
    //   this.$set(this.prePosition[0], 'name', 'Home')
    // }
    // if (this.prePosition[0].meta.title === '前台') {
    //   this.prePosition[0].meta.title = '首页'
    // }
    if (this.prePosition.length >= 2) {
      if (this.prePosition[1].meta.title === '首页') {
        this.prePosition[1].meta.title = ''
      }
    }
  }

}
</script>

<style lang="less">
body{
    padding-top: 60px;
    height:auto !important;
    .container{
      width: 1000px;
      height:100%;width: 100%;
      margin:0 auto;
    }
}
body, div, img, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, a, blockquote, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
ol, ul, li {
    list-style: none;
}
a{
    text-decoration: none;
}
#Pre-Position{
    width: 1000px;
    margin: 20px auto;
    p{
      display: inline-block;
    }
    div{
      display: inline-block;
      .pre-span:nth-child(1){
        i{
          display: none;
        }
      }
    }
}
img{object-fit: cover;}
</style>
